<template>
  <div class="tinymce-editor">
    <editor v-model="myValue"
            :init="init"
            :disabled="disabled"
            @change="addressCall"
            @onClick="onClick">
    </editor>
    <!--上传图片对话框-->
    <el-dialog
      title="上传图片"
      :visible.sync="uploadDialogVisible"
      width="50%">
      <!--内容主题区-->
      <upload-picture v-on:uploadCallBack="uploadCall" />
      <!--底部按钮区域-->
      <span slot="footer" class="dialog-footer">
    <el-button @click="uploadDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="uploadDialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
    <!--插入地址对话框-->
    <el-dialog
      title="添加地址"
      :visible.sync="addressDialogVisible"
      width="50%">
      <!--内容主题区-->
      <address-cascader v-on:addressCallBack="addressCall" />
      <!--底部按钮区域-->
      <span slot="footer" class="dialog-footer">
    <el-button @click="addressDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addressDialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import Editor from '@tinymce/tinymce-vue' // 引入tinymce编辑器
import tinymce from 'tinymce/tinymce' // tinymce默认hidden，不引入则不显示编辑器
import 'tinymce/themes/silver'// 主题
// import 'tinymce/plugins/image'// 插入图片
import 'tinymce/plugins/media'// 插入媒体
import 'tinymce/plugins/table'// 插入表格
import 'tinymce/plugins/lists'// 插入列表
import 'tinymce/plugins/advlist' // 高级列表
import 'tinymce/plugins/contextmenu'//
import 'tinymce/plugins/wordcount'// 字数统计
import 'tinymce/plugins/colorpicker'//
import 'tinymce/plugins/textcolor'// 文字颜色
import 'tinymce/plugins/code'// 代码块
import 'tinymce/plugins/pagebreak'// 分页符号
import 'tinymce/plugins/hr'// 水平线
import 'tinymce/plugins/preview'// 预览
import 'tinymce/plugins/print'// 打印
import 'tinymce/plugins/link'// 链接
import 'tinymce/plugins/autolink'// 自动链接
import 'tinymce/plugins/autoresize'// 编辑器大小自适应
import 'tinymce/icons/default/icons.min.js'// 引入编辑器图标icon，不引入则不显示对应图标
import 'tinymce/plugins/emoticons'// 表情
import 'tinymce/plugins/autosave' // 自动存稿
import emojis from 'tinymce/plugins/emoticons/js/emojis'// 表情，与emoticons配合使用
import '../../public/tinymce/plugins/kityformula-editor'// 数学公式
import '../../public/tinymce/plugins/lineheight'// 行高
import '../../public/tinymce/plugins/indent2em'// 首行缩进
// import '../../public/tinymce/plugins/bdmap'// 百度地图
import '../../public/tinymce/plugins/axupimgs'// 批量上传图片
import '../../public/tinymce/plugins/ax_wordlimit'
import myicon from '../../public/tinymce/icon/myicon'
import addressCascader from '../common/components/addressCascader'
import uploadPicture from '../common/components/uploadPicture'
// 字数限制
export default {
  components: {
    Editor, addressCascader, uploadPicture
  },
  props: {
    // 传入一个value，使组件支持v-model绑定
    value: {
      type: String,
      default: ''
    },
    // 基本路径，默认为空根目录，如果你的项目发布后的地址为目录形式，
    // 即abc.com/tinymce，baseUrl需要配置成tinymce，不然发布后资源会找不到
    baseUrl: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default: 'code lists advlist media table link wordcount emoticons hr preview print kityformula-editor lineheight indent2em ax_wordlimit pagebreak autolink autoresize autosave'
    },
    toolbar1: {
      type: [String, Array],
      // 代码 上一步 下一步 恢复到最新的自动保存草稿  剪切 复制 文字颜色 背景颜色 加粗 斜体 下划线 删除线 链接 左对齐 居中 右对齐 两边对齐
      default: 'code undo redo restoredraft cut copy indent2em forecolor backcolor bold italic underline strikethrough link alignleft aligncenter alignright alignjustify bullist numlist blockquote lineheight superscript subscript removeformat autosave'
    },
    toolbar2: {
      type: [String, Array],
      default: ' formatselect fontselect fontsizeselect  kityformula-editor emoticons pagebreak hr table mybutton media  preview print restoredraft myaddress  ax_wordlimit'
    }
  },
  created () {
  },
  data () {
    return {
      // 控制上传图片对话框的显示与隐藏
      uploadDialogVisible: false,
      // 控制用户地址对话框的显示与隐藏
      addressDialogVisible: false,
      // 初始化配置
      init: {
        language_url: `${this.baseUrl}/tinymce/langs/zh_CN.js`,
        language: 'zh_CN',
        skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide`,
        content_style: 'img {max-width:100%;}', // 直接自定义可编辑区域的css样式
        content_css: [`${this.baseUrl}/tinymce/skins/content/default/content.css`], // 以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
        emoticons_database_url: emojis,
        icons_url: myicon, // load icon pack
        icons: 'christmas',
        max_height: 500,
        min_height: 300,
        height: 300,
        width: 1300,
        autoresize_on_init: true, // 是否在初始化时就尝试自动调整大小。默认true启用此功能。
        autoresize_overflow_padding: 0, // 指定编辑器body初始化时两侧的距离，相当于padding-left加padding-right
        plugins: this.plugins,
        toolbar1: this.toolbar1,
        toolbar2: this.toolbar2,
        fontsize_formats: '8px 10px 12px 14px 18px 24px 36px', // 第二步
        placeholder: '在这里输入文字',
        menubar: 'file edit insert view format table tools help', // 菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”
        branding: false, // tiny技术支持信息是否显示
        // menubar: false, // 编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
        // statusbar: false,  // 最下方的元素路径和字数统计那一栏是否显示
        elementpath: false, // 元素路径是否显示
        autosave_ask_before_unload: true, // 当关闭或跳转URL时，弹出提示框提醒用户仍未保存变更内容。默认开启提示。
        autosave_interval: '30s', // 自动存稿的世界间隔。注意该值为字符串，以秒为单位，用法是数字加字母s，且只能用s这一个单位。 默认：'30s'
        autosave_prefix: 'tinymce-autosave-{path}{query}-{id}-', // 自动存稿在本地存储（local storage）中的字段（key）前缀。 默认："tinymce-autosave-{path}{query}-{id}-"
        autosave_restore_when_empty: true, // 当编辑器初始化时内容区为空时，Tinymce是否应自动还原存储在本地存储中的草稿。
        autosave_retention: '2880m', // 设置自动草稿的有效期。当草稿超过有效期则忽略。值是字符串，单位是分。语法是：数字加字母m，例如20分钟写作'20m'。
        automatic_uploads: true, // 开关使用Data URL/Blob URL插入图片和文件到内容区的方式
        paste_data_images: true, // 图片是否可粘贴
        // 此处为图片上传(单图上传)处理函数，这个直接用了base64的图片形式上传图片，
        // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        images_reuse_filename: true, // 不是每次随即生成一个新的文件名
        image_caption: true, // 在弹出框中增加一个“标题”选项，开启后图片将被包含在figure（HTML5新增）内。
        image_advtab: true, // 为图像属性编辑窗口添加高级属性，可以自定义图片的css样式（内置style）、边距（margin）和边框（border）。
        // images_upload_url: this.$config.urls.get('author_material'),// 后端处理程序的url，建议直接自定义上传函数image_upload_handler，这个就可以不用了
        // images_upload_base_path: '',//相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php
        // images_upload_credentials: true, // 对images_upload_url中指定的地址调用时是否传递cookie等跨域的凭据。
        // images_upload_handler: (blobInfo, success, failure, progress) => {
        //   // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
        //   // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        //   // const img = 'data:image/jpeg;base64,' + blobInfo.base64()
        //   // success(img)
        //   if (blobInfo.blob().size / 1024 / 1024 > 2) {
        //     failure('上传失败，图片大小请控制在 2M 以内')
        //   } else {
        //     const ax = axios.create()
        //     const formdata = new FormData()
        //     formdata.append('file', blobInfo.blob(), blobInfo.filename())
        //     const config = {
        //       headers: {
        //         'Content-Type': 'multipart/form-data',
        //         Authorization: window.sessionStorage.getItem('TOKEN_KEY')
        //       }
        //     }
        //     // this.$memory.getToken().then(token => {
        //     //   console.log(token)
        //     //   config.headers.Authorization = token
        //     // }).then(e => {
        //     //   console.log(e)
        //     // })
        //     var url = this.$config.urls.get('author_material')
        //     ax.post(url, formdata, config).then(res => {
        //       if (res.data.code === 0) {
        //         success(res.data.msg) // 上传成功，在成功函数里填入图片路径
        //       } else {
        //         failure('上传失败:' + res.data.error_message)
        //       }
        //     }).catch(() => {
        //       failure('上传出错，服务器开小差了呢')
        //     })
        //   }
        // },
        // file_picker_callback: function () {},
        // file_picker_types: 'file image media',
        // 设定最大字数，超过该值则执行自定义回调。
        ax_wordlimit_num: 5000,
        // 超过字数后执行的回调函数，该函数可包含三个参数。
        // 参数1（object）：当前编辑器的引用。
        // 参数2（string）：过滤后的纯文字，可length后得到当前字数。
        // 参数3（number）：ax_wordlimit_num参数的值。
        ax_wordlimit_callback: function (editor, txt, num) {
          alert('当前字数：' + txt.length + '，限制字数：' + num)
        },
        // 需要绑定的事件类型，多个事件用空格分隔。
        // ax_wordlimit_event
        // 两次事件触发的间隔时间。1000毫秒=1秒。
        // ax_wordlimit_delay
        setup: (editor) => {
          editor.ui.registry.addButton('mybutton', {
            icon: 'image',
            tooltip: '插入图片',
            onAction: () => {
              this.uploadDialogVisible = true
            }
          })
          editor.ui.registry.addButton('myaddress', {
            icon: 'location',
            tooltip: '插入地址',
            onAction: () => {
              this.addressDialogVisible = true
            }
          })
        }
      },
      myValue: this.value
    }
  },
  mounted () {
    tinymce.init({})
  },
  methods: {
    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    // 需要什么事件可以自己增加
    onClick (e) {
      this.$emit('onClick', e, tinymce)
    },
    // 可以添加一些自己的自定义事件，如清空内容
    clear () {
      this.myValue = ''
    },
    uploadCall (msg) { // 回调方法，接收子组件传的参数
      this.myValue += msg
    },
    addressCall (list) {
      // 将子组件传过来的省市区地址id们再传给父组件
      this.$emit('addressLoad', list)
    }
  },
  watch: {
    value (newValue) {
      this.myValue = newValue
    },
    myValue (newValue) {
      this.$emit('input', newValue)
    }
  }
}

</script>
<style scoped>
</style>
